<!-- 
    全屏
 screenfull   
    使用了全屏组件
 -->
 <template>
    <el-icon @click="chegeScreen" :title="boolScreen?'全屏':'退出全屏'">
       <i style="font-size:30px" :class="'iconfont '+ 'icon-quanping_o'"></i>
    </el-icon>
 </template>
 
 <script setup lang="ts">
import { ref,watch } from "vue"
// 引入全屏组件
import screenfull from "screenfull"

let boolScreen = ref(true)
// 给一个自定义事件
const chegeScreen = ()=>{
   boolScreen.value = !boolScreen.value
   // 点出toggle函数即可
   screenfull.toggle()
}

 </script>

 <style lang="less" scoped>
    .el-icon{
        vertical-align: -4px;
        cursor: pointer;
    }
 </style>